<template>
	<div class="words">
		<div class="flex align-center justify-center">
			<img class="logo" src="@/assets/word/book.png" />
			<span class="text-bold-sm text-lg">{{ wordInfo.version_full_name }}</span>
		</div>
		<div class="flex align-center justify-center margin-top-sm text-gray text-df">{{ wordInfo.words_count }}个单词
		</div>
		<div class="flex justify-between word-count">
			<div class="flex flex-direction align-center">
				<span class="text-green text-sl text-bold-sm">{{wordInfo.finish_day }}</span>
				<span class="margin-top-xs text-sm text-gray">剩余天数</span>
			</div>
			<div class="flex flex-direction align-center">
				<span class="text-green text-sl text-bold-sm">{{ wordInfo.plan_count }}</span>
				<span class="margin-top-xs text-sm text-gray">今日单词个数</span>
			</div>
		</div>
		<div class="time text-green">
			<span class="iconfont cuIcon-remind margin-right-xs"></span>
			<span>计划完成时间：{{ wordInfo.date }}</span>
		</div>
		<div class="cu-progress round margin-top xs">
			<span class="bg-green" :style="{ width: percentage }"></span>
		</div>
		<div class="flex justify-end align-baseline margin-top-xs text-sm "><span class="text-gray">已学完</span> <span
				class="flex text-lg text-green margin-left-xs">{{ wordInfo.yes_count}}</span><span>/{{ wordInfo.words_count}}</span>
		</div>
		<div class="btn-list margin-top">
			<button class="cu-btn round line-gray text-black" @click="onSkip('/word/word-list')">单词列表</button>
			<button class="cu-btn round line-gray text-black" @click="onSkip('/word/plan-word')">修改计划</button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { useRouter, useRoute } from 'vue-router'
	import {
		request
	} from "@/api/request";
	import { computed, onMounted, ref, defineEmits } from 'vue';
	const wordInfo = ref({
		date: "",
		end_day: 0,
		finish_day: "",
		plan_count: 0,
		today_count: 0,
		today_no_count: 0,
		version_full_name: "",
		words_count: 0,
		yes_count: 0
	})
	const router = useRouter()
	const emit = defineEmits(['getWordData'])
	const percentage = computed(() => {
		return Math.round(wordInfo.value.yes_count / wordInfo.value.words_count * 100) + '%'
	})
	onMounted(() => {
		getData()
	})
	const onSkip = (path) => {
		router.push({ path: path })
	}

	const getData =  () => {
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/index`,
			method: 'get'
		}).then(res => {
			wordInfo.value = res.data;
			emit('getWordData', wordInfo.value)
		})
	};
</script>

<style lang="scss" scoped>
	@import '../style/icon.scss';
	@import '../style/index.scss';
	@import '../style/main.scss';

	.words {
		background-color: #fff;
		margin: 10px;
		border-radius: 20px;
		padding: 22px 10px 30px;

		img {
			width: 24px;
			height: 26px;
			margin-right: 10px;
		}

		.word-count {
			margin-top: 30px;
			padding: 0 60px;
		}

		.time {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(12, 183, 108, 0.1);
			border-radius: 18px;
			height: 28px;
			margin-top: 30px;
			font-size: 14px;
		}

		.btn-list {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20px;
			padding: 0 30px;
		}
	}
</style>